<template>
  <div class="container-directorys">
    <el-card>
      <!-- 面包屑 -->
      <div class="boxBread" v-if="isok">
        <!-- 筛选 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{objID.subjectName}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row>
        <!-- 表单 -->
        <el-col :span="18">
          <el-form :inline="true" :model="directorys" size="small" label-width="80px">
            <el-form-item label="目录名称">
              <el-input v-model="directorys.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="directorys.states" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="empty">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 新增按钮 -->
        <el-col :span="6">
          <el-button
            size="small"
            type="success"
            icon="el-icon-edit"
            style="float:right"
            @click="addinfo"
          >新增目录</el-button>
          <el-link
            type="primary"
            icon="el-icon-back"
            style="float:right"
            class="linkL"
            v-if="isok"
            @click="goinfo"
          >返回学科</el-link>
        </el-col>
      </el-row>
      <!-- 总计数据条数 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom:15px"
      ></el-alert>
      <!-- 表格 -->
      <el-table :data="list">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="目录名称" prop="directoryName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">{{scope.row.addDate|parseTimeByString}}</template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">{{scope.row.state===1?'已启用':'已禁用'}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" width="200px">
            <el-link type="primary" @click="xstate(scope.row)">{{scope.row.state===1?'禁用':'启用'}}</el-link>
            <el-link
              class="linkcolor"
              :disabled="scope.row.state===1"
              @click="Xcatalog(scope.row)"
            >修改</el-link>
            <el-link
              class="linkcolor"
              :disabled="scope.row.state===1||scope.row.totals!==0"
              @click="removeinfo(scope.row)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        :page-size="directorys.pagesize"
        :current-page="directorys.page"
        @current-change="changePager"
        :page-sizes="[5,10,20,50]"
        @size-change="changesize"
      ></el-pagination>
    </el-card>
    <!-- 新增 -->
    <el-dialog :title="Tname?'新增目录':'修改目录'" :visible="showDialog" width="25%" @close="btnCancel">
      <!-- 表单组件  el-form   label-width设置label的宽度   -->
      <!-- 匿名插槽 -->
      <el-form label-width="80px" :model="objinfo" :rules="rules" size="small" ref="objinfo">
        <el-form-item label="所属学科" prop="subjectName" v-if="!isok">
          <el-select placeholder="请选择" v-model="objinfo.subjectName">
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input class="imputl" placeholder="请输入目录名称" v-model="objinfo.directoryName" />
        </el-form-item>
      </el-form>
      <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
      <el-row slot="footer" type="flex" justify="center">
        <!-- 列被分为24 -->
        <el-col :span="10">
          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  list as getlist,
  changeState,
  remove,
  add,
  update
} from "@/api/hmmm/directorys.js";
import { list as getsubject } from "@/api/hmmm/subjects.js";
export default {
  data() {
    return {
      directorys: {
        directoryName: null, //目录
        pagesize: 10, //每页显示数量
        page: 1, //页码
        states: "" //状态
      },
      // 表格数据
      list: [],
      //总条数
      total: "",
      //从学科传入的对象数据
      objID: {
        subjectName: "",
        subjectID: ""
      },
      //返回学科按钮的显示和隐藏
      isok: "",
      //新增数据
      objinfo: {
        directoryName: "", //目录名称
        subjectName: "" //学科名称
      },
      //定义一个值判断弹窗是新增还是新增
      Tname: true,
      //学科名称数据
      subject: [],
      //传入增加接口的对象
      subjectobj: {
        subjectID: "",
        directoryName: "",
        id: ""
      },
      rules: {
        directoryName: [
          { required: true, message: "目录名称不能为空", trigger: "blur" }
        ],
        subjectName: [
          { required: true, message: "所属学科不能为空", trigger: "input" }
        ]
      },
      //新增弹层的显示和隐藏
      showDialog: false
    };
  },
  created() {
    this.getcataloginfo();
    // console.log(this.objID)
  },
  methods: {
    //获取目录列表
    async getcataloginfo() {
      this.objID.subjectName = this.$route.query.name;
      this.objID.subjectID = +this.$route.query.id;
      //  console.log(this.$route.query.id)

      if (this.$route.query.id === undefined) {
        // console.log(this.objID.id)
        // console.log(data)
        const { data } = await getlist(this.directorys);
        this.list = data.items;
        this.total = data.counts;
        this.isok = false;
        // console.log(1111);
      } else {
        const { data } = await getlist(this.objID);
        this.list = data.items;
        this.total = data.counts;
        this.isok = true;
        //把从学科页面传入的学科名字双向绑定到objinfo.subjectName
        this.objinfo.subjectName = this.objID.subjectName;
      }
    },
    //分页函数
    changePager(newPage) {
      this.directorys.page = newPage;
      this.getcataloginfo();
    },
    //修改每页条数触发的函数
    changesize(newsize) {
      this.directorys.page = 1;
      this.directorys.pagesize = newsize;
      this.getcataloginfo();
    },
    //改变目录状态
    async xstate(data) {
      if (data.state === 1) {
        data.state = 0;
      } else {
        data.state = 1;
      }
      await changeState(data);
      //  console.log(data);
      this.$message.success("操作成功！");
      this.getcataloginfo();
    },
    //删除目录
    removeinfo(data) {
      this.$confirm("此操作将永久删除该目录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          remove(data);
          this.getcataloginfo();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    },
    //返回学科页面
    goinfo() {
      this.$router.push({ path: "list" });
    },
    //清空按钮
    empty() {
      this.directorys = {
        directoryName: null,
        pagesize: 10,
        page: 1,
        states: "" //状态
      };
      this.getcataloginfo();
    },
    //搜索按钮
    async onSubmit() {
      if (this.directorys.states) {
        const { data } = await getlist({
          directoryName: this.directorys.directoryName,
          state: this.directorys.states
        });
        // console.log(data)
        this.list = data.items;
        this.total = data.counts;
      } else {
        const { data } = await getlist({
          directoryName: this.directorys.directoryName
        });
        // console.log(data)
        this.list = data.items;
        this.total = data.counts;
      }
    },
    //新增按钮
    addinfo() {
      this.Tname = true;
      this.showDialog = true;
      //获取学科列表
      this.getsubject();
    },
    //获取所有学科接口
    async getsubject() {
      const { data } = await getsubject({ pagesize: 100, page: 1 });
      // console.log(data);
      this.subject = data.items;
    },
    //确定
    btnOK() {
      this.$refs.objinfo.validate(async isOK => {
        // 如果手动校验通过，那么isOK是布尔值的true
        if (isOK) {
          // console.log(this.objinfo)
          this.subject.forEach(item => {
            if (item.subjectName === this.objinfo.subjectName) {
              this.subjectobj.subjectID = item.id;
              return;
            }
          });
          this.subjectobj.directoryName = this.objinfo.directoryName;
          // console.log(this.subjectID);
          // console.log(1111);
          // console.log(this.subjectobj)
          if (this.Tname) {
            await add(this.subjectobj);
            this.$message.success("添加成功！");
          } else {
            await update(this.subjectobj);
            this.$message.success("修改成功！");
          }
          this.showDialog = false;
          this.getcataloginfo();
          this.$refs.objinfo.resetFields(); // 重置校验字段
        }
      });
    },
    //取消按钮
    btnCancel() {
      this.$refs.objinfo.resetFields(); // 重置校验字段
      this.showDialog = false;
      this.objinfo = {
        directoryName: "", //目录名称
        subjectName: "" //学科名称
      };
    },
    //修改按钮
    Xcatalog(data) {
      this.showDialog = true;
      this.Tname = false;
      //获取学科列表
      this.getsubject();
      this.objinfo.directoryName = data.directoryName;
      this.objinfo.subjectName = data.subjectName;
      this.subjectobj.id = data.id;
    }
  }
};
</script>

<style scoped lang='scss'>
.container-directorys {
  padding: 10px 15px;
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
}
.boxBread {
  margin-bottom: 10px;
  height: 30px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}
.el-link {
  margin-right: 10px;
}
.linkL {
  margin-top: 10px;
}
.linkcolor {
  color: #66b1ff;
}
.imputl {
  width: 78%;
}
</style>
